<template>
  <div>
    <el-card>
      <template #header>
        <div>引用第三方插件【vue-countup-v3】</div>
      </template>
      <count-up
        class="countup-wrap"
        :end-val="currentValue"
        :start-val="previousValue"
        prefix="¥"
        decimalPlaces="2"
      ></count-up>
    </el-card>
    <el-card>
      <template #header>
        <div>手动封装</div>
      </template>
      <CountMode
        :decimals="form.decimals"
        :duration="form.duration"
        :end-value="form.endValue"
        :prefix="form.prefix"
        :separator="form.separator"
        :start-value="form.startValue"
        :suffix="form.suffix"
      />
      <el-form inline label-width="80px" :model="form">
        <el-form-item label="起始值">
          <el-input-number v-model="form.startValue" :min="0" />
        </el-form-item>
        <el-form-item label="最终值">
          <el-input-number v-model="form.endValue" :min="0" />
        </el-form-item>
        <el-form-item label="持续时间">
          <el-input-number v-model="form.duration" :min="0" />
        </el-form-item>
        <el-form-item label="小数位数">
          <el-input-number v-model="form.decimals" :max="2" :min="0" />
        </el-form-item>
        <el-form-item label="前缀">
          <el-input v-model="form.prefix" clearable />
        </el-form-item>
        <el-form-item label="后缀">
          <el-input v-model="form.suffix" clearable />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup>
  import { onMounted } from "vue";
  import CountUp from "vue-countup-v3";
  import CountMode from "/@/components/Count.vue";

  const timer = ref(null);

  const previousValue = ref(0); // 上一个值
  const currentValue = ref(4); // 当前值

  const form = reactive({
    startValue: 0,
    endValue: 999,
    decimals: 0,
    prefix: "",
    suffix: "",
    separator: ",",
    duration: 5000,
  });

  onMounted(() => {
    timer.value = setInterval(() => {
      updatePreviousValue();
    }, 4000);
  });

  // 每次更新当前值后都会调用这个函数
  const updatePreviousValue = () => {
    previousValue.value = currentValue.value;
    currentValue.value = currentValue.value * 2;
  };
</script>
<style lang="scss" scoped>
  div {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    // display: flex;
    // align-items: center;
    // justify-content: center;
  }
  .countup-wrap {
    span {
      font-size: 36px;
    }
  }

  .count-container {
    .count-text {
      height: 80px;
      margin-bottom: calc(var(--el-margin) / 2);
      font-size: 60px;
      font-weight: bold;
      text-align: center;
      background: linear-gradient(to top, #77e0a0, var(--el-color-primary));
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
</style>
